<template>
  <FormView
    v-model="entity"
    :title="entity.id ? '修改楼层管理' : '新建楼层管理'"
    :toolbar-attrs="{ buttons: ['back', 'save', 'cancel'] }"
    :toolbar-listeners="{ save: persist }">
    <FormHolder ref="form" label-width="100px" :model="entity">
      <FormItemGroup block-title="基本信息">
        <ElFormItem label="所属楼栋" prop="edificeId" label-width="110px" :rules="edificeRules">
          <VueTreeSelect
            v-model="entity.edificeId"
            :options="edificeOptions"
            :class="['form-tree-select', { 'is-readonly': false }]"
            :normalizer="normalizer"
            style="width: 99%"
            :disable-branch-nodes="true"
            :show-count="true"
            placeholder="选择所属楼栋信息" />
        </ElFormItem>

        <FormInput v-model="entity.name" :span="24" prop="name" label="楼层名称" required />

        <FormInput v-model="entity.code" prop="code" label="楼层编码" disabled />

        <FormSelect v-model="entity.checkinGender" prop="checkinGender" label="入住性别" dict-type="gender" />

        <FormTextarea v-model="entity.remarks" rows="5" prop="remarks" label="备注" />
      </FormItemGroup>
    </FormHolder>
  </FormView>
</template>

<script>
  import { addObj, putObj, getObj } from '@/api/space/fyroomstorey'
  import { getEdificeTree } from '@/api/space/fyroomedifice'
  import form from '@/vue/mixin/form'

  export default {
    name: 'StoreyForm',
    relativeViewId: 'StoreyView',
    mixins: [form],
    data() {
      return {
        entity: {
          checkinGender: '',
          code: '',
          createBy: '',
          createId: 0,
          createTime: '',
          dataCode: '',
          deptFullname: '',
          deptId: 0,
          edificeId: null,
          edificeName: '',
          id: '',
          name: '',
          ordernumber: 0,
          remarks: '',
          updateBy: '',
          updateTime: ''
        },
        edificeOptions: [],
        edificeRules: { required: true, message: '请选择所属楼栋', trigger: 'change' }
      }
    },
    async created() {
      const res = await getEdificeTree()
      this.edificeOptions = res.data.data
    },
    methods: {
      load: getObj,
      save: addObj,
      update: putObj,
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.idCard,
          label: node.name,
          isDisabled: this.$isBlank(node.children) && node.affiliName === 'REGIONAL',
          children: node.children
        }
      }
    }
  }
</script>
